{extend name="property/public/insidePageBase" /}
{block name="title"}添加收费方案{/block}
{block name="body"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-form layui-form-pane">
            <div class="layui-row">
                <div class="layui-col-xs6">
                    <div class="layui-form-item">
                        <label class="layui-form-label required">方案名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="plan_name" lay-verify="require" autocomplete="off" placeholder="请输入方案名称" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs6">
                    <div class="layui-form-item" pane="">
                        <label class="layui-form-label">方案状态</label>
                        <div class="layui-input-block">
                            <select name="is_show" lay-filter="is_show" lay-search>
                                <option value="1" selected>启用</option>
                                <option value="2">禁用</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" pane="">
                <label class="layui-form-label">方案类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="mode_type" lay-filter="electricity_mode" autocomplete="off" value="1" title="单费率" checked>
                    <input type="radio" name="mode_type" lay-filter="electricity_mode" autocomplete="off" value="2" title="峰平谷电价">
                    <input type="radio" name="mode_type" lay-filter="electricity_mode" autocomplete="off" value="3" title="阶梯价">
                </div>
            </div>

            <div class="layui-form-item electricity_mode1">
                <label class="layui-input-group layui-form-label">单费率价格</label>
                <div class="layui-input-group" style="width: 440px;">
                    <input type="text" maxlength="5" name="basic_price"   autocomplete="off" class="layui-input other_fee_amount" placeholder="请输入单费率价格"  oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"/>
                    <div class="layui-input-split layui-input-suffix">/kwh/(m³)</div>
                </div>
            </div>
            <div class="electricity_mode2" style="display: none">
                <div class="layui-form-item layui-row">
                    <div class="layui-col-xs6">
                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-prefix">尖时*基础电价</div>
                            <input type="text" name="basic_price_j"  autocomplete="off" placeholder="尖时服务费电价" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                            <div class="layui-input-split layui-input-suffix">kwh</div>
                        </div>
                    </div>
                    <div class="layui-col-xs6">
                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-prefix">峰时*基础电价</div>
                            <input type="text" name="basic_price_f"  autocomplete="off" placeholder="峰时服务费电价" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                            <div class="layui-input-split layui-input-suffix">kwh</div>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item layui-row">
                    <div class="layui-col-xs6">
                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-prefix">平时*基础电价</div>
                            <input type="text" name="basic_price_p"  autocomplete="off" placeholder="平时服务费电价" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                            <div class="layui-input-split layui-input-suffix">kwh</div>
                        </div>
                    </div>
                    <div class="layui-col-xs6">
                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-prefix">谷时*基础电价</div>
                            <input type="text" name="basic_price_g"  autocomplete="off" placeholder="谷时服务费电价" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                            <div class="layui-input-split layui-input-suffix">kwh</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item electricity_mode3"  style="display: none">
                <button type="button" class="layui-btn layui-btn-fluid" id="addOtherFee">添加阶梯价</button>
                <div id="otherFeeBox"></div>
            </div>

            <div class="layui-form-item" pane="">
                <label class="layui-form-label">服务费状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="service_switch" lay-filter="service_switch" autocomplete="off" value="1" title="开启">
                    <input type="radio" name="service_switch" lay-filter="service_switch" autocomplete="off" value="2" title="关闭" checked>
                </div>
            </div>
            <div class="electric_service" style="display:none;">
                <div class="layui-form-item">
                    <label class="layui-form-label">服务费呢称</label>
                    <div class="layui-input-block">
                        <input type="text" name="service_name" autocomplete="off" placeholder="请输入服务费呢称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item electricity_mode_service_price">
                    <label class="layui-form-label">服务费价格</label>
                    <div class="layui-input-block">
                        <input type="text" name="service_price"  autocomplete="off" placeholder="请输入服务费价格" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                    </div>
                </div>
                <div class="electricity_mode2" style="display: none">
                    <div class="layui-form-item layui-row">
                        <div class="layui-col-xs6">
                            <div class="layui-input-group">
                                <div class="layui-input-split layui-input-prefix">尖时*电价服务费</div>
                                <input type="text" name="service_price_j"  autocomplete="off" placeholder="尖时服务费电价" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                                <div class="layui-input-split layui-input-suffix">kwh</div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-input-group">
                                <div class="layui-input-split layui-input-prefix">峰时*电价服务费</div>
                                <input type="text" name="service_price_f"  autocomplete="off" placeholder="峰时服务费电价" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                                <div class="layui-input-split layui-input-suffix">kwh</div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item layui-row">
                        <div class="layui-col-xs6">
                            <div class="layui-input-group">
                                <div class="layui-input-split layui-input-prefix">平时*电价服务费</div>
                                <input type="text" name="service_price_p"  autocomplete="off" placeholder="平时服务费电价" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                                <div class="layui-input-split layui-input-suffix">kwh</div>
                            </div>
                        </div>
                        <div class="layui-col-xs6">
                            <div class="layui-input-group">
                                <div class="layui-input-split layui-input-prefix">谷时*电价服务费</div>
                                <input type="text" name="service_price_g"  autocomplete="off" placeholder="谷时服务费电价" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                                <div class="layui-input-split layui-input-suffix">kwh</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item" pane="">
                <label class="layui-form-label">损耗费状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="loss_switch" lay-filter="ele_loss_switch" autocomplete="off" value="1" title="开启">
                    <input type="radio" name="loss_switch" lay-filter="ele_loss_switch" autocomplete="off" value="2" title="关闭" checked>
                </div>
            </div>
            <div class="electric_loss_box" style="display: none">
                <div class="layui-row">
                    <div class="layui-col-xs6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">损耗费呢称</label>
                            <div class="layui-input-block">
                                <input type="text" name="loss_name"  autocomplete="off" placeholder="请输入损耗费呢称" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6">
                        <div class="layui-input-group">
                            <div class="layui-input-split layui-input-prefix">损耗比例
                                <i class="layui-icon layui-icon-question hoverTips"  lay-text="
                                    <p>（基础费+服务费）* 损耗比例 % = 损耗费</p>">
                                </i>
                            </div>
                            <input type="text" name="loss_per"  autocomplete="off" placeholder="请输入损耗费比例" class="layui-input" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')">
                            <div class="layui-input-split layui-input-suffix"> %</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">备注说明</label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入备注说明" class="layui-textarea" name="remark"></textarea>
                </div>
            </div>
            <div class="layui-form-item layui-hide">
                <button class="layui-btn" lay-submit lay-filter="submitBtn" id="submitBtn">提交</button>
            </div>
        </div>
    </div>
</div>
<script id="otherFeeTpl" type="text/html">
    {{# layui.each(d, function(index,item) { }}
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
            <div class="layui-input-group">
                <input type="text"  name="stair_price[{{index}}][fee_amount]" value="{{item.fee_amount}}" data-index="{{index}}"  autocomplete="off" class="layui-input other_fee_amount" placeholder="请输入阶梯用量" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"/>
                <div class="layui-input-split layui-input-suffix">-</div>
                <input type="text" maxlength="5" name="stair_price[{{index}}][fee_amount]" value="{{item.fee_amount}}" data-index="{{index}}"  autocomplete="off" class="layui-input other_fee_amount" placeholder="请输入阶梯用量" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"/>
                <div class="layui-input-split layui-input-suffix">/kwh/(m³)</div>
            </div>
        </div>
        <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
            <div class="layui-input-group">
                <input type="text" maxlength="5" name="stair_price[{{index}}][fee_price]" value="{{item.fee_price}}" data-index="{{index}}"  autocomplete="off" class="layui-input other_fee_price" placeholder="请输入用水阶梯价" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"/>
                <div class="layui-input-split layui-input-suffix">¥ /kwh/(m³)</div>
            </div>
        </div>
        <div class="layui-col-xs1 layui-col-sm1 layui-col-md1">
            <button type="button" class="layui-btn layui-btn-danger delOtherFee" data-index="{{index}}">删除</button>
        </div>
    </div>
    {{# }); }}
</script>
{/block}
{block name="js"}
{__block__}
<script>
    layui.use(['form', 'layer', 'laytpl'], function () {
        var form = layui.form,layer = layui.layer,  $ = layui.$,  laytpl = layui.laytpl;

        var otherData = []
        $('#addOtherFee').on('click', function() {
            otherData.push({
                fee_amount:'',
                fee_price:0
            })
            loadOtherFeeTpl();
        });
        $(document).on('click', '.delOtherFee', function() {
            otherData.splice($(this).data('index'), 1);
            loadOtherFeeTpl();
        });
        $(document).on('change', '.other_fee_amount', function() {
            otherData[$(this).data('index')].fee_amount = $(this).val();
            loadOtherFeeTpl();
        });
        $(document).on('change', '.other_fee_price', function() {
            otherData[$(this).data('index')].fee_price = $(this).val();
            loadOtherFeeTpl();
        });
        function loadOtherFeeTpl() {
            var getTpl = otherFeeTpl.innerHTML,view = document.getElementById('otherFeeBox');
            laytpl(getTpl).render(otherData, function(html){
                view.innerHTML = html;
            });
        };

        form.on('radio(electricity_mode)', function(data) {
            if(data.value == 1) {
                $('.electricity_mode1').show();
                $('.electricity_mode2').hide();
                $('.electricity_mode3').hide();
                $('.electricity_mode_service_price').hide();
            }
            if(data.value == 2) {
                $('.electricity_mode1').hide();
                $('.electricity_mode2').show();
                $('.electricity_mode3').hide();
                $('.electricity_mode_service_price').hide();
            }
            if(data.value == 3) {
                $('.electricity_mode1').hide();
                $('.electricity_mode2').hide();
                $('.electricity_mode3').show();
                $('.electricity_mode_service_price').show();
            }
        });
        form.on('radio(service_switch)', function(data) {
            if(data.value == 1) {
                $('.electric_service').show();
            } else {
                $('.electric_service').hide();
            }
        });
        form.on('radio(ele_loss_switch)', function(data) {
            if(data.value == 1) {
                $('.electric_loss_box').show();
            } else {
                $('.electric_loss_box').hide();
            }
        });
    });
</script>
{/block}